<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>领取优惠券</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<link rel="stylesheet" type="text/css" href="css/fans.css"/>
</head>

<body>

<div id="wrapper">
	
	<!--按钮-->
	<div class="main-btn">
		<input class="back-btn" type="button" value="返回" />
	</div>
	
	<div class="dm-clearfix" id="fansDtlMod">
		
		<div class="bg-w" id="fansInfo">
			
			<div class="photo cover">
				<img src="image/test/photo.jpg" />
			</div>
			<div class="info-box">
				微信UnionID：TAuSKmanliSHINAT<br />
				用户名：张三<br />
				当前等级：粉丝<br />
				当前积分：1250<br />
				消费金额：无<br />
				性别：男<br />
				年龄：无<br />
				生日：无<br />
				注册时间：2017-10-01 12：21：21<br />
				收货地址（默认）：无<br />
				手机号：无<br />
				用户标签：无<br />
				专属导购：暂无
			</div>
			<input class="bg-m edit-btn" type="button" value="编辑" />
		</div>
		
		<!--使用记录-->
		<div class="main-nav bg-w" id="historyMod">
			<ul class="nav-box dm-clearfix">
				<li class="on" @click="tab(0)">粉丝足迹</li>
				<li @click="tab(1)">积分明细</li>
			</ul>
			<div class="main-table">
				<!--足迹-->
				<table class="dm-table" v-show="hisType == 0" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
					<tr>
						<th width="30">序号</th>
						<th>足迹内容</th>
						<th width="180">足迹时间</th>
					</tr>
					<tr class="tc" v-for="(item,index) in history">
						<td>{{index+1}}</td>
						<td>{{item.cot}}</td>
						<td>{{item.time}}</td>
					</tr>
				</table>
				
				<!--明细-->
				<table class="dm-table" v-show="hisType == 1" cellpadding="0" cellspacing="0" width="100%" border="1" bordercolor="#ddd">
					<tr>
						<th width="30">序号</th>
						<th width="180">时间</th>
						<th>积分变更</th>
						<th>变更事项</th>
						<th>剩余积分</th>
					</tr>
					<tr class="tc" v-for="(item,index) in scoreData">
						<td>{{index+1}}</td>
						<td>{{item.time}}</td>
						<td>{{item.type}}</td>
						<td>{{item.res}}</td>
						<td>{{item.score}}</td>
					</tr>
				</table>
				
				<div class="pageMod">
					<input type="button" class="first-btn" value="首页" />
					<input type="button" class="prev-btn" value="上一页" />
					<div class="page-box">
						<a class="on">1</a>
						<a>2</a>
						<a>3</a>
						<a>4</a>
						<span>…</span>
						<a>100</a>
					</div>
					<input type="button" class="next-btn" value="下一页" />
					<input type="button" class="last-btn" value="末页" />
				</div>
			</div>
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="data/data.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		history:data.fansHis,
		scoreData:data.score,
		hisType:0,
	},
	methods:{
		tab:function(type){
			$(".nav-box li").eq(type).addClass('on').siblings().removeClass('on');
			this.hisType = type;
		},
	},
	created:function(){
		console.log(this.hisType);
	},
});

</script>

</body>
</html>
